require(['../config'],()=>{
    require(['template','header-shop','zoom','fly','footer',],(template,HeadShop)=>{
        class Index {
            constructor(){
                this.getId().then(()=>{
                    this.render()
                    this.zoom()
                    this.toCart()
                    this.edition()
                })

            }
            
            getId () {
                let id = Number(window.location.search.slice(4))     
                return new Promise((resolve)=>{
                    $.get('http://rap2api.taobao.org/app/mock/239068/shop',{ id },(resp)=>{
                        if(resp.code == 200){
                            const {detail} = resp.body
                            this.resp = {
                                ...detail,
                                id,
                            checked:true

                            }
                        }
                        resolve()
                    })
                })          
                
            }

            render () {
                let str1 = template('temp1',{ detail:this.resp })
                $('#content').html(str1)
                
                let str2 = template('temp2',{ details:this.resp })
                $('#details').html(str2)
            }

            zoom() {
                $('.bigImg img').elevateZoom({
                    gallery: 'gal1'
                })
            }

            
            toCart(){
                $('#cart').on('click',(e)=>{
                    this.fly(e)
                    $('#rightCart span,#headCart span').show()

                    //把加入购物的商品数据存到localStrorage里
                    let cart = localStorage.getItem('cart')      //先取出在push到一个数组里，然后重新再存
                    if(cart){
                       cart = JSON.parse(cart) 
                       const isExist = cart.some(item=>item.id === this.resp.id)     //根据ID判断商品是否已经存在
                       if(isExist){
                           cart = cart.map(item=>{
                               if(item.id === this.resp.id) item.count ++      //就让当前商品的数量++,不需要再次push
                               return item
                           })
                       }else{
                           cart.push({...this.resp, count:1})
                       }
                       localStorage.setItem('cart',JSON.stringify(cart))
                    }else{
                        localStorage.setItem('cart',JSON.stringify([{     //存cookie会自动把数据toString,所以要先转换    并存一个数组
                            ...this.resp,
                            count:1,
                        }]))     
                    }
                })
            }

            fly(e) {
                $(`<img src="${this.resp.img[0]}" style="width:40px;height:40px; border-radius:50%">`).fly({
                    start:{
                      left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                      top: e.clientY,  //开始位置（必填）
                    },
                    end:{
                      left: $('#rightCart').offset().left - $(window).scrollLeft(), //结束位置（必填）
                      top: $('#rightCart').offset().top - $(window).scrollTop(),  //结束位置（必填）
                      width: 5, //结束时高度
                      height: 5, //结束时高度
                    },
                    speed: 1.2, //越大越快，默认1.2
                    vertex_Rtop:20, //运动轨迹最高点top值，默认20
                    onEnd: function(){
                        HeadShop.setCart()
                        this.destroy()    //插件里的方法删除DOM元素
                    } //结束回调
                  })
            }

            edition(){
                $('.edition p').on('click',function(){
                    $(this).addClass('ac').siblings().removeClass('ac')
                })

                $('.suit>div').on('click',function(){
                    $(this).addClass('ac').siblings().removeClass('ac')
                    $('.bigMoney').html($(this).children(".price").children('a').html())
                })
            }

            


        }
        new Index()
    })
})